<template>
  <div>
    <div class="org-view">
      <el-button class="tag" type="primary" @click="showUserSelect" size="small">添加</el-button>
      <el-tag class="tag" v-for="tag in props.modelValue" :key="tag.id" @close="handleClose(tag)" closable>
        {{ tag.label }}
      </el-tag>
    </div>
    <OrgSelect
        ref="userSelect"
        v-model="props.modelValue"
        :enableDept="props.enableDept"
        :enableRole="props.enableRole"
        :multipleSize="props.multipleSize"
        @ok="userSelectOk"
    />
  </div>
</template>

<script setup>
import OrgSelect from "@/components/OrgSelect/index.vue";

import {getCurrentInstance, inject, onMounted, ref} from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: Array,
  },
  enableDept: { // 开启部门可选功能
    type: Boolean,
    default: false
  },
  enableRole: { // 开启角色可选功能
    type: Boolean,
    default: false
  },
  multipleSize: { // 多选数量，-1表示不限
    type: Number,
    default: -1
  },
});

// 显示用户选择对话框
function showUserSelect() {
  proxy.$refs.userSelect.show();
}

function userSelectOk(data) {
  updateModelValue(data)
}

function handleClose(tag) {
  props.modelValue.splice(props.modelValue.indexOf(tag), 1)
}

function updateModelValue(data) {
  proxy.$emit("update:modelValue", data)
}
</script>

<style scoped lang="scss">
.org-view {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  .tag {
    margin: 5px;
  }
}
.org-view:hover {
  border: 1px solid #c0c4cc;
}
</style>